{% extends "forum/forum_home.html" %}
{% block page_link %}

{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .data_num {
            display: inline-block;
            color: #0b0b0b;
        }

        .forum_title a:link {
            color: black;
        }

        .forum_title a:hover {
            text-decoration: underline;
        }

        .forum_title a {
            font-size: 18px;

        }

        ul li {
            list-style: none;
        }

        .jjj {
            color: red;
        }

        #div a:hover {
            text-decoration: underline;
        }

        .choose ul {
            border-bottom: 1px solid #0070c1;
            list-style: none;
            width: 100%;
            padding: 0;
        }


        .search {
            width: 28%;
            display: flex;
        {#float: right;#} margin: 5.5px 0;
            margin-right: 0.5%;
            font-size: 0;
            /*border: 1px solid red;*/
        }

        .label {
            display: inline;
            padding: 0.2em 0.6em 0.3em;
            font-size: 85%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25em;
        }

        .label-info {
            background-color: #5bc0de;
        }
    </style>
{% endblock %}
{% block right_content %}
    <!--帖子列表模块-->
    <div style="padding:3px 10px 3px 20px; border-bottom: #a6a9ad solid 1px; width: 90%; position: fixed; background: white;">
        <div id="all_posts" style="display: inline-block; cursor: pointer;line-height: 38px">
            <a class="jjj"
               href="forum_home"
               style="color: red">首页</a>
        </div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_posts" style="display: inline-block; cursor: pointer;"><a
                href="forum_release_view">我的发帖</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_likes" style="display: inline-block; cursor: pointer;"><a
                href="forum_like_view">我的点赞</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_collect" style="display: inline-block; cursor: pointer;">
            <a href="forum_collection_view">我的收藏</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="competitive_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_competitive_view">精品文章</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="popular_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_popular_view">热门文章</a></div>
        <div style="display: inline-block; cursor: pointer; position: absolute;right: 5%; margin-top: 5px">
            <a href="article">
                <button type="button"
                        style="color:white;border: none; width: 100px; height: 30px; border-radius: 3px; background: #1E90FF">
                    发表热文
                </button>
            </a>
        </div>
    </div>

    <div id="category"
         style="position: fixed; top: 90px;background: white;width: 100%; padding-left: 10px; padding-top: 5px;padding-bottom: 5px;">
        {% for category in category_list %}
            <span><a href="/forum/forum_home?category={{ category.id }}"
                                                 id="category_{{ category.id }}" class="label label-info">{{ category.name }}</a></span>
        {% endfor %}
    </div>
    <div style="height: 65px"></div>
    {#    首页#}
    <div id="main_li" style=" width:100%; height: auto;padding: 10px;">
        <ul style="width: 80%">
            {% for obj in objs %}
                <li style="padding-top: 10px" onmousemove="on_this(this)" onmouseout="out_this(this)">

                    <div class="forum_title" style="padding-left: 20px">
                        <a href="forum_details?id={{ obj.id }}"
                           style="color: #121212;font-weight: bold; ">{{ obj.title }}</a>
                    </div>

                    {#        首页展示文章第一行内容#}
                    <div style="height: 75px;padding:0 20px 0 20px" id="article_body">
                        <p style="color: black; overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content_text }}</p>
                    </div>
                    {#        首页展示发布人发布时间点赞数量评论数量#}
                    <div style="padding: 15px 15px 15px 20px">
                        <div style="display: inline-block; padding: 5px;line-height: 14px; width: 25%">
                            <div class="author_name" style="display: inline-block; color: #9195a3">
                                {{ obj.author.real_name }}
                            </div>
                            <div style="display: inline-block">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="update_time" style="display: inline-block; color: #9195a3;font-size: 14px">
                                {{ obj.create_time | date:"Y-m-d H:i" }}
                            </div>
                        </div>
                        <div style="display: inline-block; width: 60%;"></div>
                        <div style="display: inline-block;">
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/未点赞.png" alt="" width="18px" height="18px">
                                <span>{{ obj.like_users.all.count }}</span>
                            </div>
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/non_comment.png" alt="" width="18px" height="18px">
                                <span>{{ obj.articlecomment_set.all.count }}</span>
                            </div>
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/未收藏.png" alt="" width="18px" height="18px">
                                <span>{{ obj.collection_users.all.count }}</span>
                            </div>
                        </div>
                    </div>
                    <div style="border-bottom: #b3b3b3 dashed 1px; width: 100%"></div>

                </li>
            {% endfor %}
        </ul>
    </div>
    {#   排行榜#}
    <div id="rank_li"
         style="width: 10%; height: 410px;position: fixed; right: 3%; top: 15%; background: #E2E4E7; padding: 15px 15px 15px 0; border-radius: 15px">
        <h4 style="text-align: center; font-weight: bold; color: #1E90FF; margin-bottom: 25px;">优秀作者展示</h4>
        <ul>
            {% for j in name_list %}
                {% if forloop.counter == 1 %}
                    <li style="color: #1E90FF;font-size: 18px; cursor: pointer" onmousemove="on_this_1(this)"
                        onmouseout="out_this_1(this)"><a
                            href="forum_creator_center_view?user_id={{ j.user_id }}&rank={{ forloop.counter }}"><span
                            style="margin-right: 5px"><img
                            src="../../static/forum/img/Au.png" alt="" width="20px" height="20px"></span>{{ j.name }}
                    </a></li>
                {% elif forloop.counter == 2 %}
                    <li style="color: #1E90FF;font-size: 18px; cursor: pointer" onmousemove="on_this_1(this)"
                        onmouseout="out_this_1(this)"><a
                            href="forum_creator_center_view?user_id={{ j.user_id }}&rank={{ forloop.counter }}"><span
                            style="margin-right: 5px"><img
                            src="../../static/forum/img/Ag.png" alt="" width="20px" height="20px"></span>{{ j.name }}
                    </a></li>
                {% elif forloop.counter == 3 %}
                    <li style="color: #1E90FF;font-size: 18px; cursor: pointer" onmousemove="on_this_1(this)"
                        onmouseout="out_this_1(this)"><a
                            href="forum_creator_center_view?user_id={{ j.user_id }}&rank={{ forloop.counter }}"><span
                            style="margin-right: 5px"><img
                            src="../../static/forum/img/Cu.png" alt="" width="20px" height="20px"></span>{{ j.name }}
                    </a></li>
                {% elif forloop.counter > 3 %}
                    <li style="color: #1E90FF;font-size: 18px; cursor: pointer" onmousemove="on_this_1(this)"
                        onmouseout="out_this_1(this)"><a
                            href="forum_creator_center_view?user_id={{ j.user_id }}&rank={{ forloop.counter }}"><span
                            style="margin-right: 5px"><img
                            src="../../static/forum/img/top_ten.png " alt="" width="20px"
                            height="20px"></span>{{ j.name }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>

{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("main_page").className = "add-nav-active";
            document.getElementsByClassName("right_body")[0].style.background='white';
        };
        url = window.location.href
        if (url.split('?category=')[1]) {
            document.getElementById('category_' + url.split('?category=')[1]).style.color = 'red';
        }

        function on_this(this_is) {
            this_is.style.background = '#e3e3e3'
        }

        function out_this(this_is) {
            this_is.style.background = '#e8edf4'
        }

        function on_this_1(this_1) {
            this_1.style.background = '#d9d9d9'
            this_1.style.color = '#00c0ff'
        }

        function out_this_1(this_1) {
            this_1.style.background = '#E2E4E7'
            this_1.style.color = '#1E90FF'
        }

    </script>


{% endblock %}